@import '@styles/minx.scss';
@import '@styles/theme.scss';
@import '@styles/icon.font.scss';
.postDetail{
    height: 100%;
    background-color: $white;
    &__swiper__indictor{
        width: 100px;
        height: 40px;
        position: absolute;
        flex-direction: row;
        justify-content: center;
        border-radius: 20px;
        right: 20px;
        bottom: 10px;
       
        background-color: rgba($color: #000000, $alpha: 0.3);
        &__currentIndex{
            color: $white;
            width: 16px;
        }
        &__total{
            color: $white;
        }
    }
    &__contentWrapper{
        padding: 0 30px 50Px;
    }
    &__image{
        height: 100%;
        width: 100%;
    }
    &__title{
        font-size: 40px;
        font-weight: bold;
        color:$text-color;
        margin-top: 20px;
    }
    &__content{
        font-size: 30px;
        margin-top:20px;
        color:$text-color;
    }
    &__tag{
        margin-top:15px;
    }
    &__createTime{
        margin-top:15px;
        font-size:20px;
    }
    &__comment{
        @include border(top,1px, solid, #ccc);
        margin-top: 20px;
        &__item{
            display: flex;
            flex-direction: row;
            padding : 20px 0;
            // justify-content: space-between;
            margin: 20px 0;
        }
        
        &__avatar{
            width:50px;
            height: 50px;
            margin: 10px 20px 0 0;
        }
        &__username{
            color: $text-color-lighter;
            font-size: 24px;
        }

        &__thirdLine{
            flex-direction: row;
            align-items: center;
        }

        &__replayBtn{
            margin-left: 10px;
            color:$text-color-light;
            font-size:22px;
        }
        &__expandBtn{
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
            &__arrowDown{
                font-size: 24px;
            }
        }

        &__expandText{
            font-size: 24px;
        }



        &__ctime{
            font-size:22px;
            color: $text-color-lighter;
        }
        &__content{
            margin-top:8px;
            color: $text-color;

        }
        &__btns{
            @include flexEnd;
            align-self: flex-start;
            flex: 1;
            &__group{
                flex-direction: row;
                align-items: center;
            }
        }
        &__btn{
            margin-left: 30px;
        }
    }
    &__subComment{
        &__item{
            display: flex;
            flex-direction: row;
            margin: 20px 0;
        }
        
        &__avatar{
            width:50px;
            height: 50px;
            margin: 10px 20px 0 0;
        }
        &__username{
            color: $text-color-lighter;
            font-size: 24px;
        }

        &__thirdLine{
            flex-direction: row;
            align-items: center;
        }

        &__replayBtn{
            margin-left: 10px;
            color:$text-color-light;
            font-size:22px;
        }
        &__expandBtn{
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
            &__arrowDown{
                font-size: 24px;
            }
        }

        &__expandText{
            font-size: 24px;
        }



        &__ctime{
            font-size:22px;
            color: $text-color-lighter;
        }
        &__content{
            margin-top:8px;
            color: $text-color;

        }
        &__btns{
            @include flexEnd;
            align-self: flex-start;
            flex: 1;
            &__group{
                flex-direction: row;
                align-items: center;
            }
        }
        &__btn{
            margin-left: 30px;
        }
    }
    &__operateBar{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 20px;
        @include border(top,1px, solid, #ccc);
        background-color: $white;
        &__input{
            width: 450px;
            height: 70px;
            background-color: $input-bg;
            border-radius: 35px;
            padding-left: 20px;
        }
        &__btns{
            display: flex;
            flex-direction: row;
        }
        &__Icon{
            width: 40px;
            height: 40px;
        }
        &__sendBtn{
            color:$btn-bg;
        }
    }
    &__btns{
        @include flexStart();
        &__group{
            @include flexStart();
            margin-left: 29px;
        }
        &__thumbsUp{
            width: 36px;
            height: 33px;
            margin-right: 3px;
        }
        &__comment{
            width: 36px;
            height: 33px;
            margin-right: 3px;
        }
    }
}

.keyboardAccessory__Mask{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgba($color: #000000, $alpha: 0.3);
}